<template>
  <div id="main">
    <div id="title">
      <img src="../../public/img/BUGFIXING.png" id="titleImg" width="60px"/>
      <span id="titleText">缺陷管理系统</span>
      <div id="userName">
        <span id="uname">欢迎你，{{ userInfo.userName }}</span>
        <input id="logout" type="button" value="注销" @click="logout()"/>
      </div>
    </div>
    <div id="content">
      <div id="permissions">
        <el-menu
            style="width: 100%"
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-submenu :index="index+''" v-for="(per,index) in list">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ per.permissionName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="child.permissionId+''" v-for="child in per.children" @click="aa(child)">
                {{ child.permissionName }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div id="secondViews">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data: function () {
    return {
      list: [],
      userInfo: {
        userId: "",
        account: "",
        userName: "",
        sex: "",
        tel: "",
        eMail: "",
        roleId: "",
      }
    }
  },
  methods: {
    aa(child) {
      console.log(child.permissionId);
      if (child.permissionId == 6) {
        this.$router.push("/usr")
      } else if (child.permissionId == 8) {
        this.$router.push("/BugPriority")
      } else if (child.permissionId == 9) {
        this.$router.push("/Buglevel")
      } else if (child.permissionId == 10) {
        this.$router.push("/BugClassify")
      } else if (child.permissionId == 11) {
        this.$router.push("/Bugstatement")
      } else if (child.permissionId == 12) {
        this.$router.push("/bugList")
      } else if (child.permissionId == 13) {
        this.$router.push("/QueryBugByState")
      } else if (child.permissionId == 14) {
        this.$router.push("/bugInfo")
      } else if (child.permissionId == 15) {
        this.$router.push("/Feedback")
      } else if (child.permissionId == 16) {
        this.$router.push("/bugClassifyChart")
      } else if (child.permissionId == 17) {
        this.$router.push("/bugStateChart")
      } else if (child.permissionId == 18) {
        this.$router.push("/bugSeverityChart")
      } else if (child.permissionId == 19) {
        this.$router.push("/WorkingHoursMounth")
      } else if (child.permissionId == 20) {
        this.$router.push("/WorkingHoursDay")
      } else if (child.permissionId == 4) {
        this.$router.push("/ProjectManager")
      } else if (child.permissionId == 22) {
        this.$router.push("/authority")
      }
    },


    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    selectPermission: function () {
      var _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost/permission/getPermissionById",
        headers: {"token": localStorage.getItem("token")},
        success: function (data) {
			console.log(data);
          _this.list = data.list;
          // console.log(data);
        }
      })
    },
    selectUserInfo: function () {
      var _this = this;
      $.ajax({
        url: "http://localhost/user/userInfo",
        type: "get",
        headers: {"token": localStorage.getItem("token")},
        success: function (data) {
          _this.userInfo = data.obj;
          localStorage.setItem("userId", data.obj.userId)
        }
      })
    },
    logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$router.push("/");
    },
  },
  created: function () {
    this.selectPermission();
    this.selectUserInfo();
  }
}
</script>

<style scoped>
#title {
  background: linear-gradient(#e66465, #5F4FEE);
  width: 100%;
  height: 80px;
}

#titleImg {
  float: left;
  margin-left: 20px;
  margin-top: 10px;
}

#titleText {
  font-family: 楷体, serif;
  float: left;
  line-height: 80px;
  font-size: 35px;
  font-weight: bolder;
  margin-left: 30px;
}

#userName {
  float: right;
  font-size: 16px;
  color: white;
  font-family: 楷体, serif;
  font-weight: 500;
  margin-right: 50px;
  line-height: 80px;
}

#content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 80px;
  bottom: 0;
}

#permissions {
  width: 15%;
  height: 100%;
  float: left;
  background-color: rgb(84, 92, 100);
}

#secondViews {
  width: 85%;
  height: 100%;
  float: left;
  background: url("../../public/img/index.jpg") no-repeat;
  background-size: 100% 100%;
}

.el-menu {
  border-right: none;
}

.el-submenu .el-menu-item {
  line-height: 25px;
  height: 25px;
  font-size: 12px;
  text-align: center;
}

.el-icon-location {
  margin-right: 10px;
}

#logout {
  background: linear-gradient(#5F4FEE, #e66465);
  width: 50px;
  height: 25px;
  border-radius: 5px;
  margin-left: 20px;
  cursor: pointer;
  font-family: 楷体,serif;
  color: white;
  border: 1px solid violet;
}

#userName {
  width: 200px;
  height: 50px;
  float: right;
}
</style>
